<template>
  <div>
    <zm-panel :visible.sync="value" @change="closeAfter">
      <div slot="title">
        <div class="dib">{{ returnData.name }}</div>
        <tag-type
          :value="linkInfo.linkStatus || returnData.checkStatus"
          :msg="linkInfo.linkStatusMsg"
        />
      </div>
        <app-block class="optionBtn" v-if="isApproval&&isShowApproveBtn">
          <!-- 控制 在审批流里面才显示-->
          <template>
            <zm-button @click="onEdit" v-if="+linkInfo.isEdit === 1" plain>
              编辑
            </zm-button>
            <template v-if="returnData.checkStatus === '1'">
              <zm-button
                @click="onRevocation"
                v-if="+linkInfo.isSponsor"
                plain
                type="info"
              >
                撤销审批
              </zm-button>
              <zm-button
                @click="onApproved('0', returnData)"
                type="danger"
                v-if="+linkInfo.isAction && isHiddenApproveBtn"
                plain
              >
                审批驳回
              </zm-button>
              <zm-button
                @click="onApproved('1', returnData)"
                v-if="+linkInfo.isAction && isHiddenApproveBtn"
                plain
                type="success"
              >
                审批通过
              </zm-button>
            </template>
            <zm-button @click="submitAppro" v-if="showBaseBtn" plain>
              提交审批
            </zm-button>
          </template>
        </app-block>
        <app-block>
          <zm-tabs
            class="mt15"
            :list="detailTabsList"
            v-model="activeName"
          ></zm-tabs>
          <components
            :is="activeName"
            :info-data="infoData"
            :return-data="returnData"
            :business-id="businessId"
            :process-type="processType"
          ></components>
        </app-block>
      <approve-input
        v-if="showApproveDialog"
        v-model="showApproveDialog"
        :type="approveObj.approveType"
        ref="approveDialog"
        @after-approve="afterApprove"
      ></approve-input>
      <edit-return
        v-if="editVisible"
        v-model="editVisible"
        :info-data="infoData"
        :order-id="returnOrderId"
        :refund-id="businessId"
        @after-return="reLoad"
      ></edit-return>
      <div slot="footer"></div>
    </zm-panel>
  </div>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import approveMixin from '@/mixins/approveMixin'
import approveProcessApis from '@/api/src/approve'
import ReturnBaseInfo from './ReturnBaseInfo'
import ApprovalRecord from '@/views/approval/components/Record'
import TagType from '@/components/TagType'
import saleOrderApi from '@/api/src/saleOrder'
import ApproveInput from '@/components/ApproveInput'
import EditReturn from '../ReturnOperation'
import { PROCESS_TYPE } from '@/model'
export default {
  components: {
    ReturnBaseInfo,
    ApprovalRecord,
    TagType,
    ApproveInput,
    EditReturn
  },
  mixins: [panelMixin, approveMixin],
  props: {
    businessId: {
      type: String,
      default: ''
    },
    isApproval: {
      type: Boolean,
      default: false
    },
    returnOrderId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeName: 'ReturnBaseInfo',
      linkInfo: {},
      infoData: {},
      returnData: {},
      editVisible: false,
      processType: PROCESS_TYPE.saleOrderRefund
    }
  },
  computed: {
    detailTabsList () {
      return [
        {
          label: '退货信息',
          name: 'ReturnBaseInfo'
        },
        {
          label: '审批记录',
          name: 'ApprovalRecord'
        }
      ]
    },
    approveObj () {
      return {
        businessId: this.businessId,
        draftId: this.draftId,
        processType: this.processType,
        approveType: '0'
      }
    },
    showBaseBtn () {
      return (
        ['2', '4'].includes(this.returnData.checkStatus) &&
        +this.linkInfo.isSponsor
      )
    }
  },
  watch: {},
  created () {
    this.getInfo() // 进入时重新获取详情，后续刷新要用数据
  },
  methods: {
    async getInfo () {
      const _res = await saleOrderApi.getInfo({ id: this.returnOrderId })
      this.infoData = {
        ..._res,
        customizePrice: _res.customizePrice && JSON.parse(_res.customizePrice)
      }
      const _return = await saleOrderApi.getRefundDetail({
        id: this.businessId
      })
      this.returnData = _return
      if (this.isApproval) {
        this.getApprove()
      }
      // this.$emit('after-save')
    },
    reLoad () {
      this.getInfo()
      this.$emit('after-save')
    },
    async getApprove () {
      const _res = await approveProcessApis.getLinkStatus({
        ...this.approveObj
      })
      this.linkInfo = _res
    },
    onEdit () {
      this.editVisible = true
    },
    async submitAppro () {
      await approveProcessApis.submit({
        ...this.approveObj,
        linkName: this.returnData.name
      })
      this.$message.success('成功提交审批!')
      this.reLoad()
    }
  }
}
</script>
